<template>
    <div>
        <Card>
            <span slot="title">商品添加</span>
            <div slot="content">
                <el-form
                    :model="ruleForm"
                    :rules="rules"
                    ref="ruleForm"
                    label-width="100px"
                    class="ruleForm"
                >
                    <el-form-item label="商品名称" prop="name">
                        <el-input
                            v-model="ruleForm.name"
                            class="longInput"
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="商品分类" prop="category">
                        <el-select
                            v-model="ruleForm.category"
                            placeholder="请选择活动区域"
                        >
                            <el-option
                                v-for="item in category"
                                :key="item.cateName"
                                :label="item.cateName"
                                :value="item.cateName"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 计数器 -->
                    <el-form-item label="商品价格">
                        <el-input-number
                            v-model="ruleForm.price"
                            :min="0"
                            :max="999"
                            label="描述文字"
                        ></el-input-number>
                    </el-form-item>

                    <!-- 图片上传 -->
                    <el-form-item label="商品图片">
                        <el-upload
                            class="avatar-uploader"
                            action="http://127.0.0.1:5000/goods/goods_img_upload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                        >
                            <img
                                v-if="imgUrl"
                                :src="baseUrl + imgUrl"
                                class="img"
                            />
                            <i
                                v-else
                                class="el-icon-plus avatar-uploader-icon"
                            ></i>
                        </el-upload>
                    </el-form-item>

                    <!-- 商品描述 -->
                    <el-form-item label="商品描述" prop="goodsDesc">
                        <el-input
                            type="textarea"
                            v-model="ruleForm.goodsDesc"
                            class="longInput"
                        ></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="submitForm(ruleForm)"
                            >添加商品</el-button
                        >
                    </el-form-item>
                </el-form>
            </div>
        </Card>
    </div>
</template>

<script>
import Card from "@/components/Card.vue";
import { GOODS_REG } from "@/utilis/reg.js";
import { cateType, addGoods } from "@/apis/goods.js";
import local from "@/utilis/local.js";
export default {
    components: {
        Card,
    },
    data() {
        const nameReg = (rule, value, callback) => {
            if (!value) {
                callback(new Error("输入不能为空"));
            } else if (!GOODS_REG.test(value)) {
                callback(new Error("请输入2~9位字符"));
            } else {
                callback();
            }
        };
        const descReg = (rule, value, callback) => {
            if (!value) {
                callback(new Error("输入不能为空"));
            } else if (!GOODS_REG.test(value)) {
                callback(new Error("请输入3~50位字符"));
            } else {
                callback();
            }
        };
        return {
            ruleForm: {
                name: "",
                category: "",
                price: 0,
                imgUrl: "",
                goodsDesc: "",
            },
            baseUrl: "http://127.0.0.1:5000/upload/imgs/goods_img/",
            // 分类
            category: [],
            // 表单验证
            rules: {
                name: {
                    validator: nameReg,
                    trigger: "blur",
                },
                goodsDesc: {
                    validator: descReg,
                    trigger: "blur",
                },
                category: {
                    trigger: "blur",
                    message: "请填写分类",
                },
            },
            // 图片
            imgUrl: "",
            dialogVisible: false,
            disabled: false,
        };
    },
    methods: {
        // 图片上传成功
        handleAvatarSuccess(res) {
            let { code, msg, imgUrl } = res;
            if (code == 0) {
                this.$message({
                    message: msg,
                    type: "success",
                });
            }
            this.imgUrl = imgUrl;
            this.ruleForm.imgUrl = imgUrl;
        },
        beforeAvatarUpload() {},

        // 添加商品提交按钮
        async submitForm(row) {
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {
                    await addGoods(this.ruleForm);
                    this.$router.push("/goods/goods-list")
                } else {
                    this.$message.error("请按要求填写");
                    
                }
            });
        },
        // 获取分类列表
        async cateTypeList() {
            let { categories } = await cateType();
            local.setItem("typeList",JSON.stringify(categories))
            this.category = categories;
        }
    },
    created() {
        this.cateTypeList();
    },
};
</script>

<style lang="less" scoped>
.ruleForm {
    .longInput {
        width: 400px;
    }
    /deep/.avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }
    .avatar {
        width: 120px;
        height: 120px;
        display: block;
    }
    .img {
        width: 120px;
        height: 120px;
        display: block;
    }
}
</style>